<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_018_过滤器</title>

</head>
<body>
    <div id="app">
        过滤器关键字：filter<br />
        输入：<input type="text" v-model="msg" /><br />
        要求首字母大写：<span>{{msg | filter1}}</span> <br />
        要求首尾字母大写（支持同时使用多个过滤器，将第一个过滤后的值再进行过滤，用级联的方式）：<span>{{msg | filter1 | filter2}}</span> <br />
        <div :abc="msg | filter1">属性绑定也可以使用过滤器，在控制台看，这个div属性abc的属性值的第一个字母变为了大写</div>
        <!-- 过滤器可以携带参数，参数是从第二个参数开始的，第一个表示要过滤的数据 -->
        携带参数的过滤器：<input type="text"  v-model="msg" /><br />
        <span>{{msg | filter3("one","two")}}</span>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        //参数表示要过滤的数据
        Vue.filter("filter1",function(val){
            return val.charAt(0).toUpperCase() + val.slice(1);
        });
        Vue.filter("filter2",function(val){
            return val.charAt(0).toUpperCase() + val.slice(1,val.length) + val.charAt(val.length-1).toUpperCase();
        });
        //过滤器可以携带参数，参数是从第二个参数开始的，第一个表示要过滤的数据
        Vue.filter("filter3",function(val,one,two){
            return val + "---" + one + "---" + two;
        });
        var vm = new Vue({
            el:'#app',
            data:{
                msg:""
            }

           
        });

    </script>
</body>

</html></SCRIPT>